<template>
	
		<view class="container">
			<!-- 头部 -->
			<view class="header">
				<p style="margin-right: 230px;margin-top: 10px; margin-left: 10px; font-size: 20px;">{{orderObj.name}}</p>
				<p style="margin-top: 10px; font-size: 15px;">{{orderObj.status}}</p>
			</view>
			<!-- 列表清单 -->
			<view class="orderList">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height: 100vh;">
					<view class="orderItem" v-for="item in orderDetailList" :key="item.id">
						<cover-image class="controls-play" :src='item.goodsImg'></cover-image>
						<p style="margin-top: 10px;margin-right: 80px;">{{item.goodsName}}</p>
						<p style="margin-top: 10px; margin-left:30px;">￥{{item.price}}</p>
						<p style="position: relative;bottom: -10px">x{{item.num}}</p>
					</view>
					
					<view>
						<span style="margin-left: 150px;margin-top: 30px;">实付￥ {{price}}</span>
					</view>
				</scroll-view>
				
				
			</view>
			
		</view>

</template>

<script>
	export default {
		data() {
			return {
				orderObj:'',
				orderDetailList:[],
				price:0,
			}
		},
		onLoad(option){
			this.orderObj = JSON.parse(option.orderObj)
			this.load()
		},
		methods: {
			load(){
				this.$request.get('/orders/selectOrderDetailByOrderNo/'+this.orderObj.orderNo).then(res =>{
					this.orderDetailList = res.data
						for(var i = 0; i<this.orderDetailList.length;i++){
							this.price +=this.orderDetailList[i].price;
						}
					
				})
			}
		}
	}
</script>

<style>
	.controls-play {
		width: 80px;
		height: 80px;
		margin-right: 20px;
		margin-top: 5px;
		margin-left: 15px;
	}
	.container {
		margin: 10px;
		background-color: white;
		height: 90vh;
		box-shadow: 0px 0px 20px black;
		border-radius: 10px;
	}
	
	.container .header {
		display: flex;
	
	}
	.container .orderList {
		
		background-color: white;
	}
	
	.container .orderList .orderItem{
		display: flex;
		flex-wrap: nowrap;
	}
</style>
